<template>
	<view class="container">
		<view class="profit">
			<view class="money">
				<view>{{money}}</view>
				<text>总体现金额</text>
			</view>
		</view>
		
		<scroll-view scroll-y class="list report" v-if="list.length!=0" @scrolltolower="loadMore">
			<view class="list-item" v-for="(item,index) in list" :key="item.order_sn">
				<view class="u-flex u-row-left u-col-center u-p-t-8 u-p-b-8 u-m-b-20" style="width:  77%;">
					<image style="width: 80rpx;height: 80rpx;border-radius: 50%" src="/static/image/tixian_item.png"></image>
					<view class="list-item-col u-m-l-20" style="width:  80%;">
						<view style="width: 100%;color: #333333;font-size: 34rpx" v-if="item.ali_name">
							<text>{{ item.ali_name }}-</text>
							<text>{{item.ali_account}}</text>
						</view>
						<view style="width: 100%;color: #333333;font-size: 34rpx" v-if="!item.ali_name&&item.bank_name">
							<text>{{ item.bank_name }}-</text>
							<text>{{item.bank_card}}</text>
						</view>
						<view style="width: 100%; color: #999999;font-size: 26rpx" class="u-m-t-8">
							<text>{{item.begintime}}-</text>
							<text>{{item.endtime}}</text>
						</view>
					</view>
				</view>
				<view style="width: 23%;" class="list-item-col u-m-b-20">
					<text class="qian">{{item.money}}</text>
					<text :style="{
						'color':item.state_text=='未发放'?'#8efd8e':(item.state_text=='已拒绝'?'#f15555':'#3EB9FF'),
						'background':item.state_text=='未发放'?'#f1fdf1':(item.state_text=='已拒绝'?'#f8e0e0':'#e4f2fa')}" style="border-radius: 20rpx;font-size: 26rpx;padding: 4rpx 16rpx;margin-top: 10rpx">{{ item.state_text }}</text>
					
				</view>
			</view>
		</scroll-view>

		<view class="list" v-else>
			<view class="empty">
				暂无体现记录
			</view>
		</view>

	</view>
</template>

<script>
import {
	cashList,
	moneyRecord
} from '../../../api/api.js'
	export default {
		data() {
			return {
				money: '0',
				list: [],
				total: '',
				current_page: 1,
				limit: 30,
				last_page: 1
			}
		},
		onLoad() {
			this.getRecord()
		},
		methods: {
			loadMore() {
				if (this.current_page > this.last_page) {
					uni.showToast({
						icon: 'none',
						title: '没有更多体现记录了'
					})
					return
				}
				cashList({
					limit: this.limit,
					page: this.current_page
				}).then(res => {
					for (let i = 0; i < res.data.data.length; i++) {
						this.list.push(res.data.data[i])
					}
					this.money = res.data.cash_total
					this.total = res.data.total
					this.last_page = res.data.last_page
					this.current_page = res.data.current_page + 1
				})
			},
			getRecord() {
				cashList({
					limit: this.limit,
					page: this.current_page
				}).then(res => {
					this.list = res.data.data
					this.money = res.data.cash_total
					this.total = res.data.total
					this.last_page = res.data.last_page
					this.current_page = res.data.current_page + 1
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100%;
	}

	.profit {
		width: 100%;
		height: 300upx;
		background: url('/static/image/bg_tixian.png') center no-repeat ;
		display: flex;
		justify-content: center;
		align-items: center;

		.money {
			width: 300upx;
			text-align: center;
			color: #fff;

			view {
				font-size: 42upx;
			}

			text {
				font-size: 34upx;
			}
		}
	}

	.list {
		width: calc(100% - 60upx);
		padding: 0 30upx;
		height: calc(100% - 300upx);

		.list-item {
			width: 100%;
			min-height: 120rpx;
			padding: 10upx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1upx solid #ECECEC;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			.qian {
				color: #3EB9FF;
				font-size: 34rpx;
			}

			view {
			
			}


		}

		.empty {
			width: 100%;
			height: 100upx;
			line-height: 100upx;
			text-align: center;
		}
	}
	@media screen and (min-width:800px){
		.list{
			height:calc(100vh - 100upx)!important;
		}
	}
	.report {
		background-color: #FFFFFF;
		.title {
			width: calc(100%);
			margin-top: 20rpx;
			height: 60upx;
			//margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			text{
				width: 25%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			
			.content {
				width: 80%;
				height: 100%;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				
				view {
					width: 30%;
					background-color: #FFFFFF;
					height: 50%;
					display: flex;
					align-items: center;
					// justify-content: space-around;
					
					.spot {
						width: 15upx;
						height: 15upx;
						border-radius: 50%;
						margin: 0 10upx;
					}
					
					.blue {
						background-color: #46b5ff;
					}
					
					.green {
						background-color: #37c666;
					}
					
					.red {
						background-color: #ff6566;
					}
					
					.orange {
						background-color: #ffa240;
					}
					
					.violet {
						background-color: #e274ff;
					}
					
					.lightBlue {
						background-color: #19d8c9;
					}
					
				}
				
			}
		}
		
		.con {
			width: auto;
			height: 1600upx;
			padding: 15upx 30upx 0;
			border-top: 1upx solid #eae7eb;
			
			.item {
				min-height: 170upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				text,view{
					width: 25%;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				.content {
					width: 80%;
					float: right;
					height: 130upx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					flex-wrap: wrap;
					
					view {
						width: 30%;
						background-color: #FFFFFF;
						height: 50%;
						display: flex;
						align-items: center;
						// justify-content: space-around;
						
						.spot {
							width: 15upx;
							height: 15upx;
							border-radius: 50%;
							margin: 0 10upx;
						}
						
						.blue {
							background-color: #46b5ff;
						}
						
						.green {
							background-color: #37c666;
						}
						
						.red {
							background-color: #ff6566;
						}
						
						.orange {
							background-color: #ffa240;
						}
						
						.violet {
							background-color: #e274ff;
						}
						
						.lightBlue {
							background-color: #19d8c9;
						}
						
					}
					
				}
				
			}
			
			
		}
		
		.empty {
			border-top: 1upx solid #eae7eb;
			width: 100%;
			height: 100upx;
			background-color: #FFFFFF;
			text-align: center;
			line-height: 100upx;
		}
	}
	.list-item-col{
		display: flex;
		height: 100%;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}

</style>
